<template>
  <div class="nav2">
    <NavTitle title="车辆数据统计" />
    <div>
      <div class="flex justify-end p-8px">
        <NavButton
          v-for="(item, index) in menuList"
          :key="item.title"
          :plain="activeIndex !== index"
          @click="handleBtn(item, index)"
        >{{ item.title }}</NavButton>
      </div>
      <div class="h-235px">
        <DwChart :options="options" />
      </div>
    </div>
  </div>
  <div class="nav3">
    <div class="nav3_title">车辆归属地排行</div>
    <template v-if="infoList.length">
      <div class="nav3_main pt-18px">
        <div v-for="(item, index) in infoList" :key="item.region" class="flex items-center nav3_main-list justify-between pl-13px pr-23px">
          <div class="flex items-center">
            <div class="icon">{{ index + 1 }}</div>
            <div class="text-18px ml-11px">{{ item.region }}</div>
          </div>
          <div class="text-24px color2">{{ item.total }}</div>
        </div>
      </div>
    </template>
    <DwEmpty v-else class="h-268px" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import * as echarts from 'echarts'
import DwChart from '@/components/Chart'
import NavTitle from '@/components/NavTitle'
import NavButton from '@/components/NavButton'
import { systemDateStaticsApi } from '@/api'

const options = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      lineStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0,
            color: 'rgba(0, 255, 233,0)'
          }, {
            offset: 0.5,
            color: 'rgba(255, 255, 255,1)'
          }, {
            offset: 1,
            color: 'rgba(0, 255, 233,0)'
          }],
          global: false
        }
      }
    }
  },
  legend: {
    show: true,
    y: '10',
    icon: 'stack',
    itemWidth: 10,
    itemHeight: 10,
    data: [{
      name: '驶入车辆',
      textStyle: {
        color: '#00F6FF'
      }
    }, {
      name: '驶离车辆',
      textStyle: {
        color: '#007CFF'
      }
    }]
  },
  grid: {
    top: '18%',
    left: '12%',
    right: '5%',
    bottom: '15%'
  },
  xAxis: [{
    axisLine: {
      show: false
    },
    type: 'category',
    axisLabel: {
      fontSize: 12,
      color: '#fff'
    },
    boundaryGap: false,
    data: ['星期一', '星期二', '星期三', '显示四', '星期五', '星期六', '星期天']
  }],

  yAxis: [{
    type: 'value',
    name: '车流量分布(辆)',
    nameTextStyle: {
      color: '#B8D3F1',
      fontSize: 12
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgba(87, 206, 234, 0.1)'
      }
    },
    axisLabel: {
      margin: 15,
      textStyle: {
        color: '#B8D3F1',
        fontSize: 12
      }
    }
  }],
  series: [{
    name: '驶入车辆',
    type: 'line',
    symbol: 'circle',
    symbolSize: 12,
    itemStyle: {
      // 设置线条上点的颜色（和图例的颜色）
      normal: {
        color: '#00F6FF'
      },
      emphasis: {
        borderColor: '#fff',
        borderWidth: 3,
        shadowColor: 'rgba(0, 0, 0, .3)',
        shadowBlur: 0,
        shadowOffsetY: 2,
        shadowOffsetX: 2
      }
    },
    lineStyle: {
      normal: {
        width: 2, // 设置线宽为2
        color: '#00F6FF' // 修改进入人数线的颜色
      }
    },
    areaStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgba(0,202,149,0.3)'
        },
        {
          offset: 1,
          color: 'rgba(0,202,149,0)'
        }
        ], false),
        shadowColor: 'rgba(0,202,149, 0.9)',
        shadowBlur: 20
      }
    },
    data: []
  }
  // {
  //   name: '驶离车辆',
  //   type: 'line',
  //   symbol: 'circle',
  //   symbolSize: 12,
  //   itemStyle: {
  //     // 设置线条上点的颜色（和图例的颜色）
  //     normal: {
  //       color: '#007CFF'
  //     },
  //     emphasis: {
  //       borderColor: '#fff',
  //       borderWidth: 3,
  //       shadowColor: 'rgba(0, 0, 0, .3)',
  //       shadowBlur: 0,
  //       shadowOffsetY: 2,
  //       shadowOffsetX: 2
  //     }
  //   },
  //   lineStyle: {
  //     normal: {
  //       width: 2, // 设置线宽为2
  //       color: '#007CFF' // 修改离开人数线的颜色
  //     }
  //   },
  //   areaStyle: {
  //     normal: {
  //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  //         offset: 0,
  //         color: 'rgba(108,80,243,0.3)'
  //       },
  //       {
  //         offset: 1,
  //         color: 'rgba(108,80,243,0)'
  //       }
  //       ], false),
  //       shadowColor: 'rgba(108,80,243, 0.9)',
  //       shadowBlur: 20
  //     }
  //   },
  //   data: []
  // }
  ]
})

const menuList = ref([
  {
    title: '周客流量',
    type: 'week'
  },
  {
    title: '月客流量',
    type: 'month'
  },
  {
    title: '年客流量',
    type: 'year'
  }
])

const infoList = ref([])

const getData = async (type) => {
  const { data } = await systemDateStaticsApi({
    DateType: type
  })

  const { list, top } = data
  infoList.value = top || []
  infoList.value = infoList.value.slice(0, 5)

  const xAxis = []
  const series1 = []
  // const series2 = []
  list.forEach(item => {
    xAxis.push(item.title)
    series1.push(item.totalEnter)
    // series2.push(item.totalExit)
  })

  options.value.xAxis[0].data = xAxis
  options.value.series[0].data = series1
  // options.value.series[1].data = series2
}

getData('week')

const activeIndex = ref(0)

const handleBtn = (item, index) => {
  getData(item.type)
  activeIndex.value = index
}

</script>

<style lang="scss" scoped>
.nav3 {
  color: #fff;

  .nav3_title {
    font-size: 16px;
  }

  .nav3_main-list {
    height: 47px;
    background: linear-gradient(180deg, rgba(0, 128, 254, 0.1) 0%, rgba(0, 128, 254, 0.2) 100%);
    margin-bottom: 8px;

    .icon {
      background: url(@/assets/b4.png);
      background-size: 100% 100%;
      width: 29px;
      height: 34px;
      text-align: center;
      line-height: 34px;
      font-size: 20px;
    }

    &:nth-child(1) {
      .icon {
        background: url(@/assets/b1.png);
      }
    }

    &:nth-child(2) {
      .icon {
        background: url(@/assets/b2.png);
      }
    }

    &:nth-child(3) {
      .icon {
        background: url(@/assets/b3.png);
      }
    }
  }
}

.color2 {
  color: rgba(216, 216, 216, 1);
}
</style>
